<template>
    <div class="edit">
        <!-- 头部搜索 -->
        <header>
            <div class="filter-part">
                <span class="span">&nbsp;城市：{{detalisall.provinceEnd}}&nbsp;&nbsp;{{detalisall.cityFrom}}</span>
            </div>
        </header>
        <Row>
            <Col span="6">
                <div class='wrapper' v-for="(item,index) in lista"
                    :key="index">
                    <span class ='name'>{{ item.title }}：</span>
                    <iSwitch size="large" v-model="item.status" @on-change="changea">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </iSwitch>
                </div>
            </Col>
            <Col span="18">
                <Form :label-width="200" style="margin-bottom:-24px;">
                    <FormItem v-if="statusa==true">
                        <span class="ml span"><b>*</b>&nbsp;患者支付的配送费统一为</span>
                        <InputNumber placeholder="请输入" :min="0" v-model="detalisall.unifiedMoney" step="1"></InputNumber>
                        <small>元/单</small>
                    </FormItem>
                </Form>
            </Col>
        </Row>
        <Row>
            <Col span="6">
                <div class='wrapper' v-for="(item,index) in listb"
                    :key="index">
                    <span class ='name'>{{ item.title }}：</span>
                    <iSwitch size="large" v-model="item.status" @on-change="changeb">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </iSwitch>
                </div>
            </Col>
            <Col span="18">
                <Form :label-width="200" style="margin-top:10px;">
                    <FormItem label="包邮条件：设置订单药品总价超过" v-if="statusb==true">
                        <input type="number" placeholder="请输入包邮价格" :min="0" v-model="detalisall.freeFromMoney" class="otherinput">
                        <small>元包邮</small>
                    </FormItem>
                </Form>
            </Col>
        </Row>
        <Row>
            <Col span="5">
                <p><b>*</b>&nbsp;请您选择此城市签约快递公司</p>
            </Col>
            <Col span="5">
                <p class="ye">注：至少选择一个</p>
            </Col>
        </Row>
        <Table border ref="selection" :columns="columns4" :data="Companylist"></Table>
        <br>
        <div style="text-align:center">
            <Button style="width:75px;height:35px;" type="primary" @click="handleSubmit">
                <Icon type="ios-checkmark" style="margin-right: 5px" />保存
            </Button>
            <Button style="width:75px;height:35px;margin-left: 8px" @click="handleReset">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
            </Button>
        </div>
    </div>
</template>
<script>
    import api from "@/api/commonApi";
    import provinces from "@/components/provinces";
    export default {
        components: {
            provinces,
        },
        data () {
            return {
                statusa:false,
                statusb:false,
                lista: [
                    {
                        title: "是否统一快递费",
                        status: false
                    }
                ],
                listb: [
                    {
                        title: "是否包邮",
                        status: false
                    }
                ],
                company:{  
                    "pageNo": 0,
                    "pageSize": 10,
                    "params": {
                    },
                    "sortDescs": [
                        "id"
                    ]
                },
                provinceCode:null,
                cityCode:null,
                unifiedMoney:0,
                freeFromMoney:0,
                isFreeShipping:null,
                isUnifiedFee:null,
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: '快递公司',
                        key: 'companyName',
                        align: 'center',
                        width: 150,
                    },
                    {
                        title: '官方收费标准',
                        align: 'center',
                        children: [
                            {
                                title: '每单价格/元',
                                key: 'price',
                                align: 'center',
                                render: (h, params) => {
                                    return h('Form', [
                                        h('Input', {
                                            style:{
                                                marginLeft:"4px",
                                                width:'150px'
                                            },
                                            props:{
                                                type:'text',
                                                value:params.row.price //使用key的键值
                                            },
                                            on: {
                                                "on-blur": event => {
                                                    params.row.price = event.target.value;
                                                    this.Companylist[params.index].price = event.target.value;
                                                    this.$set(params.row, '$isEdit', false);
                                                },
                                            },
                                        }),
                                    ])
                                }
                            },
                            {
                                title: '收费说明',
                                key: 'remark',
                                align: 'center',
                                render: (h, params) => {
                                    return h('Form', [
                                        h('Input', {
                                        style:{
                                            margin:"5px",
                                        },
                                        props:{
                                            type:'textarea',
                                            rows: "1",
                                            value:params.row.remark //使用key的键值
                                        },
                                        on: {
                                            "on-blur": event => {
                                                params.row.remark = event.target.value;
                                                this.Companylist[params.index].remark = event.target.value;
                                                this.$set(params.row, '$isEdit', false);
                                            },
                                        }
                                        }),
                                    ])
                                    }
                            }
                        ]
                    },
                ],
                Companylist: [],
                detalisall:{},
            }
        },
        created(){
           this.getdetails()
        },
        mounted(){
        },
        methods: {
            //获取详情
            getdetails(){
                this.$axios.post(api.findDistributionById,{id: this.$route.query.id}).then(res => {
                    if (res.data.code === 1) {
                       this.detalisall = res.data.object
                       this.Companylist = res.data.object.feeList
                        for(var i = 0;i<this.Companylist.length;i++){
                            this.Companylist[i]._checked = true;
                        }
                       if(this.detalisall.isFreeShipping == 0){
                            this.listb[0].status = false
                            this.statusb = false
                        }else{
                            this.listb[0].status = true
                            this.statusb = true
                        }
                        if(this.detalisall.isUnifiedFee == 0){
                            this.lista[0].status = false
                            this.statusa = false
                        }else{
                            this.lista[0].status = true
                            this.statusa = true
                        }
                    } else {
                        this.$Message.error('请求异常');
                        return false;
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            //统一快递费赋值
            // changer(val){
            //     this.Companylist.forEach((item) => {
            //         item.price = val;
            //     })
            // },
            //是否统一快递费
            changea(status){
                if(status){
                    this.statusa = true
                }else{
                    this.statusa = false
                    this.detalisall.unifiedMoney = ''
                }
            },
            //包邮
            changeb(status){
                if(status){
                    this.statusb = true
                }else{
                    this.statusb = false
                    this.detalisall.freeFromMoney = ''
                }
            },
            //小数处理
            handleInput2(e) {
                e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
            },
            //提交
            handleSubmit(){
                let tabdata = this.$refs.selection.getSelection()
                //包邮判断
                if(this.statusb==false){
                    this.isFreeShipping = 0
                }else{
                    this.isFreeShipping = 1
                    if(this.detalisall.freeFromMoney==''||this.detalisall.freeFromMoney==null){
                        this.$Message.info('请您输入包邮费用')
                        return
                    }
                }
                //统一配送费判断
                if(this.statusa==false){
                    this.isUnifiedFee = 0
                }else{
                    this.isUnifiedFee = 1
                    if(this.detalisall.unifiedMoney==''||this.detalisall.unifiedMoney==null){
                        this.$Message.info('请您输入统一配送费')
                        return
                    }
                }
                if(tabdata.length <=0){
                    this.$Message.info('请您选择此城市签约快递公司')
                    return
                }
                let params = {
                    'provinceFrom':this.detalisall.provinceFrom,//配送开始省
                    'provinceEnd':this.detalisall.provinceEnd,//配送目的省
                    'cityEnd':this.detalisall.cityEnd,//配送目的市
                    'cityFrom':this.detalisall.cityFrom,//配送开始市
                    'isFreeShipping':this.isFreeShipping,//是否免邮（0不免 1免邮 ）
                    'freeFromMoney':this.detalisall.freeFromMoney,//超过多少免邮 全免设置0
                    'id':this.detalisall.id,
                    'type':0,//类型(0同城、1全国)
                    'unifiedMoney':this.detalisall.unifiedMoney,//统一快递费
                    'isUnifiedFee':this.isUnifiedFee,//是否统一快递费（0不统一 1统一 ）   
                    feeList: this.Companylist              
                }
                this.$axios.post(api.updateDistribution,params).then(res => {
                    if (res.data.code === 1) {
                        this.$Message.success('修改成功')
                        this.handleReset()
                    } else {
                        this.$Message.error('请求异常');
                        return false;
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            //取消
            handleReset(){
                this.functionJS.queryNavgationTo(this,"/index/drugfirmsmanage/deliverycharge/samecity/list");
            },
        },
        watch: {
            'detalisall.unifiedMoney'(val) {
                if(this.statusa){
                    this.Companylist.forEach((item) => {
                        item.price = val;
                    })
                }
            }
        }
    }
</script>
<style scoped lang="less">
    .edit {
        width: 100%;
        min-width: 1200px;
        padding: 0 20px;
        font-size: 14px;
        margin: 0 auto;
        background: #fff;
        padding-bottom: 20px;
        .wrapper{
            width:100%;
            height:auto;
            display:flex;
            flex-direction:row;
            align-items:center;
            padding:0 10px;
            margin:12px 0;
            font-size: 12px;
            .name {
                min-width:200px;
            }
        }
        header {
            width: 100%;
            .filter-part {
                display: flex;
                flex-wrap: wrap;
                .filter-item {
                    display: flex;
                    margin: 10px 10px 10px 0;
                    label {
                        white-space: nowrap;
                        line-height: 32px;
                        width: 100px;
                        text-align: right;
                    }
                    .input {
                        width: 220px;
                    }
                    .select {
                        width: 70px;
                    }
                }
                .filter-btn-group {
                    margin: 10px 10px 10px 0;
                    flex: 0 0 auto;
                }
            }
            .fun-part {
                margin-top: 15px;
                margin-bottom: 10px;
                a {
                    vertical-align: bottom;
                }
            }
        }
        .ml{
            margin-left: -157px;
        }
        small{
            color:#333;
            font-size: 12px;   
        }
        .span{
            color:#333;
            font-size: 12px;
            line-height: 50px;
            b{
                color: red;
            }
        }
        p{
            line-height: 40px;
            b{
                color: red;
            }
        }
        .ye{
            color:#FF9933;
            font-size: 12px;
        }
        .otherinput{
            width: 10.5%;
            display: inline-block;
            height: 32px;
            line-height: 1.5;
            padding: 4px 7px;
            font-size: 12px;
            border: 1px solid #dddee1;
            border-radius: 4px;
            color: #495060;
            background-color: #fff;
            background-image: none;
            position: relative;
            cursor: text;
            outline: none;
        }
        .otherinput:hover {
            border-color: #5362e1;
        }
    }
</style>
